<template>
  <div class="login-page">
    <top-bar-son :title="title"></top-bar-son>
<!--    <h1>用户登录状态：{{$store.state.success}}</h1>-->
<!--    <h1>用户角色：{{$store.state.role}}</h1>-->
    <div class="space"></div>
    <!--    登录表单   -->
    <div class="formContainner">
      <van-form @submit="onSubmit">
        <van-field
            v-model="username"
            name="username"
            label="用户名"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">登录</van-button>
        </div>
      </van-form>
    </div>

  </div>
</template>

<script>
import TopBarSon from '../components/TopBarSon.vue';
import {userRejister} from "@/request/api/user";
import {adminLoginSuccess} from "@/utils/returnToast";
export default {
  name: "Login",
  components: {TopBarSon},
  data() {
    return {
      title: '登录',
      username:'',
      password:''
    }
  },
  methods:{
    onSubmit(values) {
      let promise = new Promise((resolve,reject)=>{
        userRejister(values)
            .then(response=>{
              //用户角色 数值形式(role:ROLE_hysk)
              let userRole = response.data.role;
              //用户登录状态 数据形式(success:true/false)
              let userStatus = response.data.success;
              //用户登录时的昵称/ID  数据形式 (han56) 将会在【我的】页面的登录成功状态显示
              let nickName = this.username;
              //用户角色 中文数据返回形式 数据形式(name:"矿区管理员")
              let roleName = response.data.name;
              //返回用户所属单位 返回数据类型 (area:"hysk") 作用：在store/index.js 中的 getters进行
              // computed计算返回所属单位的中文形式 并在我的页面显示
              let userArea = response.data.area;
              //将成功返回的数据存储在 store 中 通过 mutation 动态更改数据变化
              this.$store.commit('changeStatus',userStatus);
              this.$store.commit('changeRole',userRole);
              this.$store.commit('changeNickName',nickName);
              this.$store.commit('changeRoleName',roleName);
              this.$store.commit('changeUserArea',userArea);
              //根据用户角色跳转页面
              if (userRole){
                switch (userRole){
                  case "ROLE_hysk":
                    //矿区管理员—跳转至管控页面
                    adminLoginSuccess(userRole);
                    this.$router.push('/');
                    break;
                  case "ROLE_mdt":
                    //矿区管理员—跳转至管控页面
                    adminLoginSuccess(userRole);
                    this.$router.push('/');
                    break;
                  case "ROLE_admin":
                    //超级管理员—跳转至管控页面
                    adminLoginSuccess(userRole);
                    this.$router.push('/');
                    break;
                  case "ROLE_tour":
                    //游客跳转至发现页面
                    //矿区管理员—跳转至管控页面
                    adminLoginSuccess(userRole);
                    this.$router.push('/papers');
                    break;
                  default:
                    this.$router.push('/login');
                }
              }
              resolve();
            })
            .catch(error=>{
              reject(error);
            })
      });
      // console.log(values.username)
    },
  },
  mounted() {
  }
}
</script>

<style scoped>

.formContainner{
  height: 80px;
  padding-top: 20px;
}
.space{
  height: 50px;
}

</style>